<template>
    <el-dialog v-model="visible" title="工作流设置" fullscreen :z-index="9999">
        <div style="display: flex; height: 100%;">
            <!-- 左侧导航栏 -->
            <div style="width: 200px; border-right: 1px solid #e4e7ed; padding: 20px;">
                <el-menu default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect">
                    <el-menu-item index="largeModel">大模型设置</el-menu-item>
                    <el-menu-item index="mcpClient">MCP客户端设置</el-menu-item>
                    <el-menu-item index="system">系统设置</el-menu-item>
                </el-menu>
            </div>

            <!-- 右侧内容区域 -->
            <div style="flex: 1; padding: 20px;">
                <component :is="currentComponent" />
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang="ts" name="SettingDialog">
import { defineEmits, computed, ref, shallowRef } from 'vue';
import LargeModelSettings from './settings/largemodel_settings.vue';
import McpSettings from './settings/mcp_settings.vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true
    }
});

const activeMenu = ref('largeModel');
const currentComponent = shallowRef(LargeModelSettings);

const emit = defineEmits(['update:modelValue', 'confirm']);

const visible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
});

const handleMenuSelect = (index: string) => {
    activeMenu.value = index;
    switch (index) {
        case 'largeModel':
            import('./settings/largemodel_settings.vue').then((mod) => {
                currentComponent.value = mod.default
            })
            break;
        case 'mcpClient':
            import('./settings/mcp_settings.vue').then((mod) => {
                currentComponent.value = mod.default
            })
            break;
        case 'system':
            currentComponent.value = SystemSettings;
            break;
        default:
            currentComponent.value = LargeModelSettings;
    }
};

</script>